@extends('back_end.layouts.default')

@section('styles')
<!--     .table-striped tr:hover{
        cursor: pointer;
    } -->
    .label-default{
        margin-left:5px;
    }
<!--     .tips{
        position: absolute;
        z-index:9999;
    } -->
    #order-list > tbody > tr > td > label{
        font-size:20px;
    }
    #order-list > tbody > tr{
        height:60px;
    }
    #order-list > tbody > tr > td{
        line-height:60px;
    }

    #loading > i{
        font-size: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -40px;
    }

    .last-timer{
        font-size: 29px;
        box-shadow: 2px 2px 10px #BB211C inset;
    }

    .t-blur{
        -webkit-filter: blur(1px);
    }

    .show-btn-border{
        border-color: #fff !important;
    }

    .td-loader{
      min-width: 28px;
    }

    .td-loader > i{
      color: #fff !important;
    }

@stop

{{-- Web site Title --}}
@section('title')
{{{ Lang::get('general.back_end.order').Lang::get('general.index') }}} :: @parent
@stop
@section('content_header')
{{{ Lang::get('general.back_end.order').Lang::get('general.index') }}}
@stop
{{-- breadcrumb --}}
@section('breadcrumb')
<li><a href="#"><i class="fa fa-dashboard"></i> {{{ Lang::get('general.back_end.home') }}}</a></li>
<li class="active">{{{ Lang::get('general.back_end.order').Lang::get('general.index') }}}</li>
@stop
{{-- Content --}}
@section('container')
        
        <!-- hidden tips -->
        <!-- <label class="label label-danger hidden tips">点击以完成该订单..</label> -->
        <div class="row">
          <div class="col-md-12">
            <div class="box box-danger">
              <div class="box-body no-padding">
                <div class="mailbox-controls">
                  <div class="box-footer clearfix no-border bg-red">
                    <div class="btn-group pull-left" id='type-list'>
                      <button type="button" utype ="1" class="btn btn-lg show-btn-border btn-danger active hover">未出菜</button>
                      <button type="button" utype ="2" class="btn btn-lg show-btn-border btn-danger">已出菜</button>
                      <!-- <button type="button" utype ="3" class="btn btn-lg show-btn-border btn-danger">数据统计</button> -->
                    </div>
                    <!-- <button type="submit" id='get-last-data' class="btn btn-primary pull-right btn-find btn-lg" style="margin-left: 10px;"><i class="fa fa-reply"></i> 恢复上一次操作</button> -->
                    <button type="submit" id='refresh-list' class="btn show-btn-border btn-danger pull-right btn-find btn-lg btn-flat" style="margin-left: 10px;"><i class="fa fa-refresh"></i> 刷新</button>
                    <label class="label label-danger pull-right last-timer"><i class="fa fa-clock-o"></i> 上次刷新时间:<i id='re-timer'></i></label>
                  </div>
                </div>

                <section id='show-lists'>
                  <div class="table-responsive mailbox-messages">
                    @if( isset($orderList[0]) && !empty($orderList[0]) )
                    <table class="table" id="order-list">
                    <tbody>
                    @foreach( $orderList as $val )
                    <tr id='tr{{ $val->id }}'>
                      <td class="mailbox-name label-danger">
                        <input type="checkbox"/>
                      </td>
                      <td class="td-loader label-danger text-center">
                        <i class="fa fa-refresh fa-spin hidden"></i>
                      </td>
                      <td class="td-loader label-primary text-center">
                        <button class="btn btn-default print">打印</button>
                      </td>
                      <td class="mailbox-name label-warning">
                          <span style="display: none;">{{ $val->id % 999}}</span>
                         <label class="label">排队号:{{ $val->id % 999}}</label>
                      </td>
                      <td class="mailbox-name label-danger">
                        <label class="label">流水号:{{ $val->order_id}}</label>
                      </td>

                      <td class="mailbox-subject label-default">
                        @if( !empty( $val->foods ) )
                        @foreach( $val->foods as $v )
                        <label class="label label-default">{{ $v->name }}*{{ $v->count }}</label>
                        @endforeach
                        @endif
                      </td>
                      <td class="mailbox-attachment label-warning text-center">
                        <label class="label"><i class="fa fa-money"></i> 价格:{{ $val->total_price }}元</label>
                      </td>
                      <td class="mailbox-date text-right label-primary">
                        <label class="label"><i class="fa fa-clock-o"></i>下单时间:{{ $val->created_at }}</label>
                      </td>
                    </tr>
                    @endforeach
                    </tbody>
                    </table>
                    @else
                      <h1 class="text-center">暂无待备菜清单...</h1>
                    @endif
                    <!-- /.table -->
                  </div>

                </section>


                <section id='show-console' style='display: none'>
                  <div class="row">
                    <div class="col-lg-3 col-xs-6">
                      <!-- small box -->
                      <div class="small-box bg-aqua">
                        <div class="inner">
                          <h3>150</h3>
                          <p>
                            New Orders
                          </p>
                        </div>
                        <div class="icon">
                          <i class="fa fa-shopping-cart"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                                    More info 
                        <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                      <!-- small box -->
                      <div class="small-box bg-green">
                        <div class="inner">
                          <h3>53<sup style="font-size: 20px">%</sup></h3>
                          <p>
                            Bounce Rate
                          </p>
                        </div>
                        <div class="icon">
                          <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                                    More info 
                        <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                      <!-- small box -->
                      <div class="small-box bg-yellow">
                        <div class="inner">
                          <h3>44</h3>
                          <p>
                            User Registrations
                          </p>
                        </div>
                        <div class="icon">
                          <i class="ion ion-person-add"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                                    More info 
                        <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                      <!-- small box -->
                      <div class="small-box bg-red">
                        <div class="inner">
                          <h3>65</h3>
                          <p>
                            Unique Visitors
                          </p>
                        </div>
                        <div class="icon">
                          <i class="ion ion-pie-graph"></i>
                        </div>
                        <a href="#" class="small-box-footer">
                                    More info 
                        <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <!-- ./col -->
                  </div>
                </section>
                <!-- /.mail-box-messages -->
              </div>
              <!-- /.box-body -->
              <div class="overlay" id='loading' style="display: none">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
            </div>
            <!-- /. box -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
@stop

{{-- Scripts --}}
@section('scripts')
<script type="text/javascript">
    $(function () {

        'use strict';

        $('input[name="created_at_start"]').datetimepicker({
            format: 'yyyy-mm-dd',
            language:'zh-CN',
            minView:'month',
            startView:'month',
            startDate: "1970-01-01",
            endDate: "2115-01-01"
        });
        $('input[name="created_at_end"]').datetimepicker({
            format: 'yyyy-mm-dd',
            language:'zh-CN',
            minView:'month',
            startView:'month',
            startDate: "1970-01-01",
            endDate: "2115-01-01"
        });
        $('.fa-calendar').parent('div').click(function(){
            $('input[name="created_at_start"]').datetimepicker('show');
            $('input[name="created_at_end"]').datetimepicker('show');
        });

        $('form button.btn-export').click(function(event){
            event.preventDefault();
            $('.box-search form').attr('target', "_blank");
            $('.box-search form').attr("action","{{ URL::to('back_end/orders/export') }}?type="+$(this).attr('data-type'));
            $('.box-search form').submit();
        });

        $('form button.btn-find').click(function(event){
            event.preventDefault();
            $('.box-search form').attr('target', "_self");
            $('.box-search form').attr("action","{{ URL::to('back_end/orders') }}");
            $('.box-search form').submit();
        });

        //初始项
        $(document).ready(function(){

          $('header').slideUp();


          //时间刷新
          $('#re-timer').html(nowTime());

          $('#type-list > button').each(function(){

              if($(this).attr('utype') == {{ $types }})
              {
                $(this).addClass('active hover');
              }
              else
              {
                $(this).removeClass('active hover');
              }
          })
          // $('#type-list').children('button').eq(0).click();
          
        });
        //表单操作
        
        // $('.mailbox-messages > table > tbody > tr').hover(function(){

        //     $(this).mousemove(function(e) { 
        //         var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
        //         var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
                
        //         $('.tips').css({
        //           "left":xx+8,
        //           "top":yy,
        //           "padding":"5px"
        //         })
        //     }); 

        //     $('.tips').removeClass('hidden');

        // },function(){

        //     $('.tips').addClass('hidden');

        // })

        $.lastIds = [];

        <?php if( $types == 1 ){ ?>
        $('.mailbox-messages > table > tbody > tr').on('click', function(){

            $(this).find('ins').click();

        });

        $('.mailbox-messages > table > tbody > tr').each(function(){

            var self = $(this);

            self.find('ins').on('click', function(){

                var obj = $(this).parent();

                if(obj.attr('aria-checked') == 'false')
                {
                    return;
                }

                obj.parent().parent().find('td:eq(0),td:eq(2),td:eq(3),td:eq(4),td:eq(5)').addClass('t-blur');
                obj.parent().parent().find('td:eq(1) > i').removeClass('hidden');

                setTimeout(function(){

                    obj.parent().parent().fadeOut();

                }, 500)


                var trId = obj.parent().parent().attr('id');

                $.lastIds.push(trId);

                $.get("{{ URL::to('back_end/orders/order_change') }}", {status:2, order_today_id:trId.substring(2, trId.length)}, function(data) {
                  /*optional stuff to do after success */
                });
                

            });

        })
        <?php } ?>

        //刷新
        $('#refresh-list').on('click', function(){

            $('#loading').fadeIn();

            setTimeout(function(){

                $('#order-list > tbody > tr').find('td:eq(0),td:eq(2),td:eq(3),td:eq(4),td:eq(5)').removeClass('t-blur');
                $('#order-list > tbody > tr').fadeIn();

                $('.icheckbox_minimal').each(function(){
                    
                    var state = $(this).attr('aria-checked');

                    if( state == 'true' )
                    {
                        $(this).children('ins').click();
                    }

                })
                $('#order-list > tbody > tr').each(function(){

                    $(this).find('td:eq(1) > i').addClass('hidden');

                });

                $('#loading').fadeOut();

            }, 1000)

            //时间刷新
            $('#re-timer').html(nowTime());

            location.reload()

            $.lastIds = [];

        })

        //恢复
        $('#get-last-data').on('click', function(){

            if( $.lastIds.length == 0 )
            {
                return;
            }

            var lastId = $.lastIds.pop();

            $('#' + lastId).fadeIn();
            $('#' + lastId).find('td:eq(0),td:eq(2),td:eq(3),td:eq(4),td:eq(5)').removeClass('t-blur');
            $('#' + lastId).find('td:eq(1) > i').addClass('hidden');
            if( $('#' + lastId).find('ins').parent().attr('aria-checked') == 'true' )
            {
                $('#' + lastId).find('ins').click();
            }

        })


        //按钮组操作

        $('#type-list > button').on('click', function(){

            $('#type-list').each(function(){

                $(this).children('button').removeClass('active hover');

            })

            //change btn status
            $(this).addClass('active hover');

            //loading
            $('#loading').fadeIn();

            //dim as type
            var type = $(this).attr('utype');

            //未出菜&&已出菜
            if( type == 1 || type == 2 )
            {
                //切页
                $('#show-lists').show();
                $('#show-console').hide();

                window.location.href="{{ URL::to('back_end/orders/ordershow') . '?status=' }}" + type;

                //时间刷新
                $('#re-timer').html(nowTime());
                
            }
            else if( type == 3 )
            {
                //切页
                $('#show-console').show();
                $('#show-lists').hide();
            }


            //load end
            $('#loading').fadeOut();
        })

    });

    var nowTime = function(){

        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
    }

    $(".print").click(function(){
        var label = $(this).parent('td').next().next().next().find("label");
        var queue = $(this).parent('td').next().find('label');
        var price = $(this).parent('td').next().next().next().next().text();
        var create_time = $(this).parent('td').next().next().next().next().next().find("label");
        var html = "<div class='container' style='margin-left: 10px;width:88cm;'><div class='row'>";
        html += "订单详情";
        html += "</div>"
        html += "-----------------------------------<br/>";
        html += "<div class='row'>" + $(queue).text() + "</div>";
        html += "<div class='row'>" + $(create_time).text() + "</div>";
        html += "-----------------------------------<br/>";
        for(var i = 0,length = label.length;i < length; i++){
            html += "<div class='row'>"
            html += $(label[i]).text();
            html += "</div>";
        }
        html += "-----------------------------------<br/>";
        html += "<span>" + price + "</span>";
        html += "</div></div>";
        $(html).printFinal({ preview: false,impcss: true});
    });
    var changeStatus = function(){

    }
</script>
@stop
